<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix" />
			<text class="title">找回账号</text>
		</view>
		<swiperTabHead :tabBars="labelList" :tabIndex="tabIndex" @tabtap="tabtap" class="segmented-control"></swiperTabHead>
		<view class="login-form-content" v-if="tabIndex == 0">
				<view class="input-item flex align-center">
					<view class="iconfont icon-user icon"></view>
					<input v-model="recoverForm.name" class="input" placeholder="请输入真实姓名" />
				</view>
				<view class="input-item flex align-center">
					<view class="iconfont icon-code icon"></view>
					<input v-model="recoverForm.idNumber" class="input" placeholder="请输入身份证号码" />
				</view>
				<view class="passwordAction">
					<span style="margin-right: 40rpx;"><router-link :to="'./forgetPassword'">找回密码</router-link></span>
					<span><router-link :to="'./login'">前往登录</router-link></span>
				</view>
			    <button @click="getSearchRes" class="login-btn cu-btn block bg-blue lg round" style="background-color: #00a660;">立即搜索</button>
				
				<view class="register-content" v-if="msg != ''">
				    <p style="color: black; font-size: 28rpx;margin-bottom: 14rpx;">当前个人注册的账号信息如下:</p>
				    <p>个人账号：{{ msg.nickId }}</p>
				    <p>手机帐号：{{ msg.mobileHide}}</p>
				</view>      
		</view>
		
		<!-- 企业 -->
		<view class="login-form-content" v-if="tabIndex == 1">
				<view class="input-item flex align-center">
					<view class="iconfont icon-qiyexinxi1 icon"></view>
					<input v-model="recoverForm.companyName" class="input" placeholder="请输入企业名称" />
				</view>
				<view class="input-item flex align-center">
					<view class="iconfont icon-code icon"></view>
					<input v-model="recoverForm.creditCode" class="input" placeholder="请输入企业信用代码" />
				</view>
				<view class="passwordAction">
					<span style="margin-right: 40rpx;"><router-link :to="'./forgetPassword'">找回密码</router-link></span>
					<span><router-link :to="'./login'">前往登录</router-link></span>
				</view>
				<uni-data-checkbox v-model="radio" :localdata="companyList" style="transform:scale(1)"></uni-data-checkbox>
			    <button @click="getSearchResCompany" class="login-btn cu-btn block bg-blue lg round" style="background-color: #00a660;">立即搜索</button>
				
				<view class="register-content" v-if="radio == 1 && msg !=''">
				    <p class="sub-title">当前企业法定代表人账号信息如下：</p>
				    <p>个人帐号：<span v-if="msg.legalNickId != null">{{ msg.legalNickId}}</span><span v-else>暂无</span></p>
					<p>手机帐号：<span v-if="msg.legalMobile != null">{{ msg.legalMobile}}</span><span v-else>暂无</span></p>
				</view>     
				<view class="register-content" v-if="radio == 2 && msg !=''">
				    <p class="sub-title">当前企业管理员账号信息如下：</p>
				    <p>个人帐号：<span v-if="msg.adminNickId != null">{{ msg.adminNickId}}</span><span v-else>暂无</span></p>
					<p>手机帐号：<span v-if="msg.mobile != null">{{ msg.mobile}}</span><span v-else>暂无</span></p>
				</view>  
		</view>
    <!--滑块验证弹出-->
    <slider-verify :show="verifyShow" :do-action="doAction" @success="touchSliderResult" @close="onClose"></slider-verify>
	</view>
</template>

<script>
import swiperTabHead from "@/components/slideTab/slideTab"
import {backStaff, backCompany} from '@/api/login'
import {getCode} from '@/utils/sendSmsCode'
import {sliderVerifyMiXin} from "../utils/sliderVerifyMiXin";
import SliderVerify from "../components/slider-verify/slider-verify";
export default {
  mixins: [getCode],
  components: {SliderVerify, swiperTabHead},
  data() {
    return {
      radio: 1,
      companyList: [{
        text: '找回法定代表人账号',
        value: 1
      }, {
        text: '找回企业管理员账号',
        value: 2
      }],
      msg: '', // 信息
      labelList: [{
        title: '个人账号'
      }, {
        title: '企业管理员\法定代表人账号'
      }],
      tabIndex: 0,
      globalConfig: getApp().globalData.config,
      recoverForm: {
        name: "",
        smscode: "",
        idNumber: "",
        type: 1, //0验证码1密码2扫码
        companyName: '',
        creditCode: '',
      },
    }
  },
  methods: {
    // 企业下一步
    getSearchResCompany() {
      // 触发校验
      if (this.sliderVerifyAddVerifyNumber()) {
        return;
      }
      if (this.recoverForm.companyName == '' || this.recoverForm.creditCode == '') {
        this.$modal.msgError("请输入企业信息")
      } else {
        let data = {name: this.recoverForm.companyName, creditCode: this.recoverForm.creditCode}
        backCompany(data).then((res) => {
          if (res.code === 200) {
            this.active = 1;
            this.msg = res.data
            this.$modal.msgSuccess('搜索成功')
          } else {
            this.$modal.msgError('搜索失败')
          }
        });
      }
    },
    // 个人下一步
    getSearchRes() {
      // 触发校验
      if (this.sliderVerifyAddVerifyNumber()) {
        return;
      }
      if (this.recoverForm.name == '' || this.recoverForm.idNumber == '') {
        this.$modal.msgError("请填写信息")
      } else {
        let data = {name: this.recoverForm.name, idNumber: this.recoverForm.idNumber}
        backStaff(data).then((res) => {
          if (res.code === 200) {
            this.active = 1;
            this.msg = res.data
            this.$modal.msgSuccess('搜索成功')
          } else {
            this.$modal.msgError('搜索失败')
          }
        });
      }
    },
    /** 接受子组件传过来的值点击切换导航 */
    tabtap(index) {
      var _this = this
      _this.tabIndex = index;
      _this.msg = '';
    },
  }
}
</script>

<style lang="scss" scoped>
	::v-deep .uni-data-checklist .checklist-group .checklist-box{
		margin: 12rpx 0;
	}
	page {
		background-color: $uni-bg-color; 
	}
	
	.passwordAction{
		text-align: right;
		margin-top: 6rpx;
		a{
			color: #666;
			text-decoration: none;
		}
	}
	
	::v-deep .uni-data-checklist{
		margin: 40rpx 0 0 !important;
		width: 80%;
	}
	
	::v-deep .uni-swiper-tab{
		border-bottom: 2rpx solid #eee;
	}
	
	::v-deep .uni-data-checklist .checklist-group{
		justify-content: space-between;
	}
	
	.register-content{
		margin-top: 30rpx; 
		line-height: 42rpx;
		width:600rpx;
		color: #666;
		.sub-title{
			color: black; 
			font-size: 28rpx;
			margin-bottom: 14rpx;
		}
		p{
			text-align: left;
		}
	}
	
	.segmented-control{
		width: 82%;
		margin: 70rpx auto 0;
	}
	
	.finish-block{
		font-size: 32rpx;
		p{
			font-size: 28rpx;
			margin-top: 20rpx;
			color: #666;
		}
	}
	
	.finishIcon{
		font-size: 50rpx;
		color: $uni-color-primary;
		margin-right: 6rpx;
	}
	
	.uni-steps{
		margin: 30rpx auto 0;
	}
	
	.login-txt {
		text-align: right;
		margin-top: 6rpx;
	}

	.sms-input ::v-deep.is-input-border {
		background: #f5f6f7 !important;
		width: 95%;
		border: none;
		padding-left: 14rpx;
	}

	.text-primary {
		color: $uni-color-primary;
	}

	.gray-row {
		color: #777;
		margin: 15rpx 0;
		font-size: 26rpx;
	}

	.marginLeft {
		margin: 0 20rpx;
		vertical-align: middle;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 42rpx;
			text-align: center;
			padding-top: 25%;

			image {
				border-radius: 8rpx;
			}

			.title {
				margin-left: 20rpx;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 0 auto;
			margin-top: 10%;
			width: 80%;

			.input-item {
				margin: 40rpx auto 0;
				background-color: #f5f6f7;
				height: 90rpx;
				border-radius: 40rpx;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: left;
					padding-left: 30rpx;
				}

			}

			.login-btn {
				margin-top: 80rpx;
				height: 90rpx;
			}

		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code {
		width: 360rpx;
		color: #000;
	}

	.xieyi {
		color: #333;
		position: absolute;
		bottom: 3%;
		right: 0;
		left: 0;
	}
</style>
